<template>
	<view>
		<view class="tu">
			<image src="../../static/images/other/production.png"></image>
		</view>


		<view class="guanggao">
			<view class="shu">{{userInfo.productTimes||0}}次</view>
			<view class="chongtext3" hover-class="chongtext4" @tap="goViewAd()">看广告获取次数</view>
			<button class="chongtext3" hover-class="chongtext4" open-type="share">分享获取次数</button>
			<view class="chongtext3" hover-class="chongtext4" @tap="toRecharge()">去充值</view>
		</view>
	</view>
</template>

<script>
	// 引入vuex
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		http
	} from "../../utils/http.js"
	let rewardedVideoAd=null
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			...mapState('m_user', ['userInfo', 'token'])
		},
		onLoad() {
			let that = this
			if (wx.createRewardedVideoAd) {
				rewardedVideoAd = wx.createRewardedVideoAd({
					adUnitId: 'adunit-b29b3bf23a08a681'
				})
				rewardedVideoAd.offError();
				rewardedVideoAd.offClose();
				rewardedVideoAd.onLoad(() => {
					// console.log('onLoad event emit')
				})
				rewardedVideoAd.onError((err) => {
					// console.log('onError event emit', err)
					uni.showToast({
						title: "获取广告失败",
						duration: 2000,
						icon: "error"
					})
			 })

			}
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo', 'updateToken']),
			toRecharge() {
				uni.navigateTo({
					url: '../recharge/recharge'
				})
			},
			goViewAd() {
				if (rewardedVideoAd) {
					rewardedVideoAd.show().catch(() => {
						rewardedVideoAd.load()
							.then(() => rewardedVideoAd.show())
							.catch(err => {
								console.log(err)
								uni.showToast({
									title: "获取广告失败",
									duration: 2000,
									icon: "none"
								})
								that.withDraw()
							})
					})
					rewardedVideoAd.onClose((res) => {
						// rewardedVideoAd.offClose()
						// console.log('onClose event emit', res)
						if(!rewardedVideoAd) return
						rewardedVideoAd.offClose();
						if (res && res.isEnded) {
							http({
								url: '/user/production/change/1',
								method: "POST",
								header: {
									Authorization: that.token.data
								}
							}).then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '制作次数+1',
										icon: 'none'
									})
									that.$store.commit('m_user/updateUserInfo', res.data)
								}
							})
						} else {
							uni.showToast({
								title: "未观看完整广告",
								duration: 2000,
								icon: "none"
							})
						}
					})
				}

			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
	/* pages/myjifen/myjifen.wxss */
	.tu {
		width: 100%;
		height: 400rpx;
		border: #fff;
		text-align: center;
		margin-top: 150rpx;
	}

	.tu image {
		position: relative;
		width: 400rpx;
		height: 400rpx;
		margin: 0 auto;
	}

	.sanyou:not([size='mini']) {
		align-items: center;
		padding: 0;
		position: relative;
		margin: 0 auto;
		width: 260rpx;
		height: 80rpx;
		font-weight: 400;
		font-size: 33rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin-top: 40rpx;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.sanyou2:not([size='mini']) {
		position: relative;
		align-items: center;
		padding: 0;
		margin: 0 auto;
		width: 264rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin-top: 40rpx;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.guanggao {
		margin-top: 40rpx;
		width: 100%;
		height: 300rpx;
		text-align: center;
	}

	.shu {
		text-align: center;
		font-size: 50rpx;
		color: slategrey;
	}

	.an {
		position: relative;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #ffe3d7;
		margin: 0 auto;
		font-size: 35rpx;
		font-weight: 500;
		margin-top: 40rpx;
		border: 1px solid rgb(236, 206, 206);
		border-radius: 20rpx;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.an2 {
		position: relative;
		width: 250rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 33rpx;
		font-weight: 500;
		background-color: rgb(250, 209, 209);
		margin: 0 auto;
		margin-top: 40rpx;
		border: 1px solid rgb(224, 223, 223);
		border-radius: 20rpx;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.zi {
		text-align: center;
		font-size: 26rpx;
		color: rgb(150, 146, 146);
		margin-top: 60rpx;
	}

	.chongtext {
		/*  display: inline-block; */
		position: relative;
		margin: 0 auto;
		width: 260rpx;
		height: 80rpx;
		font-size: 33rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin-top: 40rpx;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.chongtext2 {
		/*  display: inline-block; */
		position: relative;
		margin: 0 auto;
		width: 264rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin-top: 40rpx;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.chongtext3 {
		/*  display: inline-block; */
		position: relative;
		margin: 0 auto;
		width: 260rpx;
		height: 80rpx;
		font-size: 33rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		margin-top: 40rpx;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	.chongtext4 {
		/*  display: inline-block; */
		position: relative;
		margin: 0 auto;
		width: 264rpx;
		height: 80rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		text-align: center;
		margin-top: 40rpx;
		color: white;
		border-radius: 2em;
		border: 1px solid #f7f5f5;
		background-color: #3ea2ff;
		box-shadow: inset 2px 2px 2px 0px rgba(255, 255, 255, 0.5),
			7px 7px 20px 0px rgba(0, 0, 0, 0.1), 4px 4px 5px 0px rgba(0, 0, 0, 0.1);
	}

	/* 弹窗样式 */
	.model3 {
		position: fixed;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.modalDlg3 {
		position: fixed;
		width: 520rpx;
		height: 400rpx;
		top: 400rpx;
		left: 0;
		right: 0;
		z-index: 9999;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.windowRow3 {
		position: relative;
		height: 400rpx;
		justify-content: space-between;
		align-items: center;
	}

	.userTitle3 {
		display: block;
		width: 400rpx;
		margin: 0 auto;
		color: #575555;
		padding-top: 130rpx;
		text-align: center;
		font-size: 33rpx;
	}

	.back3 {
		position: absolute;
		width: 208rpx;
		text-align: center;
		color: #9c9c9a;
		border: 2rpx solid #f0f0ee;
		border-right: 0;
		border-radius: 0 0 0 20rpx;
		padding: 25rpx;
		left: 0;
		bottom: 0;
	}

	.back4 {
		position: absolute;
		width: 208rpx;
		background-color: #f0f0ee;
		text-align: center;
		color: #9c9c9a;
		border: 2rpx solid #f0f0ee;
		border-right: 0;
		border-radius: 0 0 0 20rpx;

		padding: 25rpx;
		left: 0;
		bottom: 0;
	}

	.wishbnt3 {
		position: absolute;
		width: 208rpx;
		color: #eb5570;
		text-align: center;
		border: 2rpx solid #f0f0ee;
		border-radius: 0 0 20rpx 0;
		padding: 25rpx;
		bottom: 0;
		right: 0;
	}

	.wishbnt4 {
		position: absolute;
		width: 208rpx;
		color: #eb5570;
		text-align: center;
		border: 2rpx solid #f0f0ee;
		border-radius: 0 0 20rpx 0;
		background-color: #f0f0ee;
		padding: 25rpx;
		bottom: 0;
		right: 0;
	}
</style>
